<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }
        .line{
            width: 1px;
            height:1000px;
            position: absolute;
            background-color: red;
            left: 800px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
        }
    </style> 
</head>
<body>
    <div class="line"></div>
    <div class="box1">1</div>
    <script src="../js/tools.js"></script>
    <script>
        let box1=$(".box1")
        timer=null
        function getStyle(ele,attr){
            return getComputedStyle(ele)[attr]
        }
        
        function animation(ele,num,target,attr){
            clearInterval(ele.timer)
            ele.timer=setInterval(function(){
            // let start=ele.offsetLeft
            let start=parseFloat(getStyle(ele,attr))
            console.log(getStyle(ele,attr));
            let step=num
            let end=start+step

            if(end>=target&&num>0){
                end=target;
                clearInterval(ele.timer)
            }else if(end<=target&&num<0){
                end=0;
            }
            ele.style[attr]=end+"px"
            },30)
            }

        onkeydown = function(e){
       
            switch(e.keyCode){
                // 右39 左37
            // 上38 下40
                case 39:
                animation(box1,10,800,"left")
                    break
                case 37:
                    
                    animation(box1,-10,0,"left")
                    break
                case 38:
                animation(box1,-10,0,"top")
                    break
                case 40:
                    
                    animation(box1,10,800,"top")
                    break
            } 
        }
      
   </script>
</body>
</html>